import React, {
    Component,
    useRef
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    FlatList,
    TextInput,
    Linking,
    DeviceEventEmitter,
    ScrollView,
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import NoData from '../../utils/NoData'
import Loading from "../../utils/Loading";
import { getImgUrl } from '../../utils/ComFunction'
import Header from "../../components/header";
import OrderListItemView from './OrderListItemView'
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import { OrderStatus } from '../../utils/Enum'

import { TabView, SceneMap, TabBar } from 'react-native-tab-view';

const screenW = Dimensions.get('window').width;

let initialPage
let navigation

export default class OrderListPage extends Component {
    constructor(props) {
        super(props);
        let orderStatus = this.props.route.params && this.props.route.params.orderStatus != undefined ? this.props.route.params.orderStatus : '';
        if (orderStatus === OrderStatus.OrderStatusWaitSign) {
            initialPage = 1
        } else if (orderStatus === OrderStatus.OrderStatusWaitDelivery) {
            initialPage = 3
        } else if (orderStatus === OrderStatus.OrderStatusWaitPay) {
            initialPage = 2
        } else if (orderStatus === OrderStatus.OrderStatusWaitReceipt) {
            initialPage = 4
        } else if (orderStatus === OrderStatus.OrderStatusWaitSettlement) {
            initialPage = 5
        } else if (orderStatus === OrderStatus.OrderStatusServicing) {
            initialPage = 7
        } else {
            initialPage = 0
        }
        initialLayout = { index: initialPage };
        this.state = {
            isFranchisee: Constant.userInfo.isFranchisee ? true : false,
            orderStatus,
            index: initialPage,
            routes: [
                { key: '1', title: '全部' },
                { key: '2', title: '待签署' },
                { key: '3', title: '待付款' },
                { key: '4', title: '待发货' },
                // { key: '4', title: '待预付' },
                { key: '5', title: '待收货' },
                { key: '6', title: '待结算' },
                { key: '7', title: '交易完成' },
                { key: '8', title: '售后中' },
            ],
        }
        this.tabBarRef = React.createRef();
    }

    componentDidMount() {

    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} hideSepLine={true} Title={this.state.isFranchisee ? '销售订单' : '采购订单'} RightButton={() => this.renderRightButton()}></Header>
                {this.renderScrollTab()}
            </View>
        )
    }

    renderScene = ({ route }) => {
        switch (route.key) {
            case '1':
                return <OrderListItemView navigation={navigation} keyword={this.state.keyword} currentIndex={this.state.index} index={0} />;
            case '2':
                return <OrderListItemView navigation={navigation} keyword={this.state.keyword} orderStatus={OrderStatus.OrderStatusWaitSign} currentIndex={this.state.index} index={1} />;
            case '3':
                return <OrderListItemView navigation={navigation} keyword={this.state.keyword} orderStatus={OrderStatus.OrderStatusWaitPay} currentIndex={this.state.index} index={2} />;
                
            case '4':
                return <OrderListItemView navigation={navigation} keyword={this.state.keyword} orderStatus={OrderStatus.OrderStatusWaitDelivery} currentIndex={this.state.index} index={3} />;
            case '5':
                return <OrderListItemView navigation={navigation} keyword={this.state.keyword} orderStatus={OrderStatus.OrderStatusWaitReceipt} currentIndex={this.state.index} index={4} />;
            case '6':
                return <OrderListItemView navigation={navigation} keyword={this.state.keyword} orderStatus={OrderStatus.OrderStatusWaitSettlement} currentIndex={this.state.index} index={5} />;
            case '7':
                return <OrderListItemView navigation={navigation} keyword={this.state.keyword} orderStatus={OrderStatus.OrderStatusFinisded} currentIndex={this.state.index} index={6} />;
            case '8':
                return <OrderListItemView navigation={navigation} keyword={this.state.keyword} orderStatus={OrderStatus.OrderStatusServicing} currentIndex={this.state.index} index={7} />;
            default:
                return null;
        }
    };

    handleIndexChange = (index) => {
        console.log('index = ', index)
        this.setState({ index });
    };

    renderScrollTab() {
        return (
            <TabView
                navigationState={this.state}
                renderScene={this.renderScene}
                onIndexChange={this.handleIndexChange}
                initialLayout={{ width: screenW }}
                renderTabBar={props => (
                    <View>
                        <TabBar
                            {...props}
                            tabStyle={{ width: 70, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding: 0 }}
                            style={{ backgroundColor: '#fff' }}
                            scrollEnabled={true}  // 启用横向滚动
                            indicatorStyle={{ backgroundColor: '#FFE001', width: 30, marginLeft: 20, marginBottom: 5, height: 3, borderRadius: 2 }}
                            activeColor='#333'
                            inactiveColor='#666'
                        />
                        {
                            this.state.keyword ?
                                <View style={styles.keywordBg}>
                                    <TouchableOpacity
                                        style={styles.filterShowItem}
                                        onPress={() => {
                                            this.setState({
                                                keyword: ''
                                            })
                                        }}>

                                        <Text style={styles.filterShowText}>{this.state.keyword}</Text>
                                        <Image style={styles.filterShowCloseImg} source={require('source/image/comm/icon_close.png')}></Image>

                                    </TouchableOpacity>
                                </View>
                                :
                                null
                        }

                    </View>

                )}
                lazy={true}
            />
        )
    }

    renderRightButton() {
        return (
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={() => { this.search() }}>
                <View style={styles.rightBox}>
                    <Image style={styles.iconImg} source={require('source/image/comm/icon_search_black.png')}></Image>
                </View>
            </TouchableOpacity>
        )
    }

    search() {
        navigation.navigate('OrderSearchPage', {
            keyword: this.state.keyword,
            searchHandler: (keyword) => {
                this.setState({
                    keyword
                })
            }
        })
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    rightBox: {
        height: '100%',
        width: 70,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    iconImg: {
        width: 24,
        height: 24
    },
    scrollTab: {
        flex: 1
    },
    keywordBg: {
        width: screenW,
        height: 40,
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 15,
    },
    filterShowItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height: 30,
        backgroundColor: '#f6f6f6',
        borderRadius: 4,
        paddingHorizontal: 10,
        marginRight: 10,
    },
    filterShowText: {
        fontSize: 12,
        color: '#696969'
    },
    filterShowCloseImg: {
        width: 10,
        height: 10,
        marginLeft: 4
    },
})